<template>
	<div class="admin">
		<!-- 搜索顶部 -->
		<div class="search_box">
			<div class="search_top">
				<div class="search_title">
					<el-icon>
						<Search />
					</el-icon>
					<span class="search_title_content">筛选搜索</span>
				</div>
				<div class="search_reset_button">
					<el-button @click="resetFn">重置</el-button>
					<el-button type="primary" @click="handlerFilter">查询搜索</el-button>
				</div>
			</div>
			<div class="search_bottom">
				<span class="search_input_label">账号/姓名：</span>
				<div class="search_input_box">
					<el-input type="text" v-model="keyword" placeholder="请输入账号、姓名" />
				</div>
			</div>
		</div>
		<!-- 添加 -->
		<div class="add_box">
			<div class="add_left">
				<div class="add_left_icon">
					<el-icon>
						<Tickets />
					</el-icon>
					<span class="add_left_icon_item">数据列表</span>
				</div>
			</div>
			<div class="add_right_btn">
				<el-button type="primary" @click="handleRegister">添加</el-button>
			</div>
		</div>
		<!-- 数据列表 -->
		<div class="data_box">
			<el-table :data="tableList" border style="width: 100%">
				<el-table-column prop="id" label="编号" width="100" />
				<el-table-column prop="username" label="账号" width="200" />
				<el-table-column prop="nickName" label="姓名" width="200" />
				<el-table-column prop="email" label="邮箱" width="200" />
				<el-table-column label="添加时间" width="200">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							{{ formatTime(scope.row.createTime) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="最后登录" width="200">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							{{ formatTime(scope.row.loginTime) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="是否启用" width="80">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							<el-switch v-model.number="scope.row.status" :active-value="1" :inactive-value="0"
								@change="handleSwitch(scope.row)" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="120px">
					<template #default="scope">
						<el-button size="small" type="primary" :text="true" @click="showAssign(scope.row.id)">分配角色</el-button>
						<el-button size="small" type="danger" :text="true" @click="showModal(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页器 -->
		<div class="pagination_box">
			<el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
				:page-sizes="[10, 20, 50, 100]" :small="false" :background="true"
				layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		<!-- 弹窗 -->
		<AdminEdit :visible="modelVisible" @cancel="handleCancel" @confirm="handleConfirm" :form="from"></AdminEdit>
		<!-- 分配模态框 -->
		<AssignRole :form="info" :visible="roleVisible" @cancel="handleCancel" @confirm="handleYes"></AssignRole>
	</div>
</template>

<script setup lang="ts">
// 图标
import { Search, Tickets } from "@element-plus/icons-vue";
// 引入dayjs格式化时间
import formatTime from "@/utils/formatTime";
import useTable from "@/hooks/useTable";
import * as admin from "@/request/modules/admin";
import { ref } from "vue";
// 编辑模态框
import AdminEdit from "./components/AdminEdit.vue";
// 分配角色模态框
import AssignRole from "./components/AssignRole.vue";
import type { Ref } from "vue";
import type { IAdminListItem, getRoleInfoItem } from "@/types/global";
import { ElMessage, ElMessageBox } from "element-plus";
const keyword = ref("");
// 封装的用户列表请求
let { tableList, pagination, handleSizeChange, handleCurrentChange, fetchData } = useTable(admin.AdminListAPI, { keyword: keyword });
// 重置按钮
const resetFn = () => {
	keyword.value = "";
};
// 查询
const handlerFilter = () => {
	fetchData();
};
// 编辑模态框模态框显隐状态
const modelVisible = ref(false);
// 分配角色模态框模态框显隐状态
const roleVisible = ref(false);
const from = ref({}) as Ref<IAdminListItem>;
const info = ref([]) as Ref<number[]>;
// 定义一个状态用来表示新增
const newAdded = ref("修改");
const adminId = ref(0);
// 分配角色
const showAssign = async (id: number) => {
	let res = await admin.getRoleInfoAPI(id);
	adminId.value = id;
	// console.log(res);
	info.value = res.map((item) => item.id);
	roleVisible.value = true;
};
// 编辑
const showModal = (row: IAdminListItem) => {
	newAdded.value = "修改";
	from.value = row;
	console.log(row);
	modelVisible.value = true;
};
// 注册
const handleRegister = () => {
	newAdded.value = "添加";
	modelVisible.value = true;
	from.value = {
		email: "",
		nickName: "",
		note: "",
		password: "",
		status: 2,
		username: "",
	} as IAdminListItem;
};
// 取消
const handleCancel = () => {
	modelVisible.value = false;
	roleVisible.value = false;
};
// 确定
const handleConfirm = (form: IAdminListItem) => {
	ElMessageBox.confirm(`此操作将${newAdded.value}当前用户信息,是否继续?`, "提示")
		.then(async () => {
			if (newAdded.value === "添加") {
				// 注册用户
				await admin.adminRegisterAPI(form);
				// 请求成功关闭模态框
				modelVisible.value = false;
				// 更改后重新请求用户列表数据，更新页面
				fetchData();
				ElMessage({
					type: "success",
					message: "操作成功",
				});
			} else {
				// 提交修改后的用户数据
				await admin.adminUpdateAPI(form);
				// 请求成功关闭模态框
				modelVisible.value = false;
				// 更改后重新请求用户列表数据，更新页面
				fetchData();
				ElMessage({
					type: "success",
					message: "操作成功",
				});
			}
		})
		.catch(() => {
			// 取消
		});
};
// 修改用户状态
const handleSwitch = async (row: IAdminListItem) => {
	await admin.updateStatusAPI({ id: row.id, status: row.status });
	fetchData();
	ElMessage({
		type: "success",
		message: "状态修改成功",
	});
};
// 分配角色确定
const handleYes = (val: number[]) => {
	ElMessageBox.confirm(`此操作将修改当前用户信息,是否继续?`, "提示").then(async () => {
		roleVisible.value = false;
		await admin.AssignRolesAPI({ adminId: adminId.value, roleIds: val });
		fetchData();
		ElMessage({
			type: "success",
			message: "操作成功",
		});
	});
};
</script>

<style lang="less" scoped>
.admin {
	padding: 20px 20px 10px;

	// 搜索
	.search_box {
		padding: 20px;
		border-radius: 4px;
		box-shadow: 0 0 5px 3px #eee;

		.search_top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.search_title {
				display: flex;
				align-items: center;

				.search_title_content {
					font-size: 14px;
				}
			}
			.search_reset_button {
				display: flex;
				align-items: center;
				font-size: 12px;
			}
		}
		.search_bottom {
			display: flex;
			align-items: center;
			padding: 20px 40px 0;
			.search_input_label {
				font-size: 14px;
				margin-right: 12px;
			}
			.search_input_box {
				width: 200px;
			}
		}
	}
	// 添加
	.add_box {
		height: 61px;
		padding: 20px;
		margin: 20px 0;
		border-radius: 4px;
		box-shadow: 0 0 5px 3px #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.add_left_icon {
			display: flex;
			align-items: center;

			.add_left_icon_item {
				font-size: 14px;
				margin-left: 10px;
			}
		}
	}

	// 数据列表
	.data_box {
		padding-bottom: 20px;
		font-size: 12px;
		overflow-x: auto;
		:deep(.el-table .cell) {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 12px;
		}
	}

	// 分页器
	.pagination_box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
